86:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/35m4vqxcs65-t.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1dwxre2ob1wlz.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/35m4vqxcs65-t.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1dwxre2ob1wlz.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 88:T3c66,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import UserProfileCard from "@/components/user-profile-card" export default function Home() { return (

{/* Dark overlay */}

{/* Main content */}

{/* Footer */}

Designed and Developed with ❤️ by{" "} Dollar Gill

) } [V0_FILE]png:file="public/abstract-gradient-dark-blue-purple.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-gradient-dark-blue-purple-Hth2aOMFg323MJ0FR232mgoA3xNIKo.png" isMerged="true" [V0_FILE]png:file="public/professional-woman-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-portrait-aRtFhI6toDZYfQKtZxHYSmAPGsdCBC.png" isMerged="true" [V0_FILE]png:file="public/abstract-design-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-design-pattern-mPeHvObFXrKYMCgsSQanjSepGQjtU8.png" isMerged="true" [V0_FILE]typescriptreact:file="components/user-profile-card.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { MapPin, Calendar, Mail, Globe, Users, Heart, MessageCircle, Settings, Edit3, Youtube, X, Check, } from "lucide-react" interface UserProfile { name: string username: string bio: string location: string joinDate: string email: string phone: string website: string followers: number following: number posts: number likes: number avatar: string coverImage: string skills: string[] isFollowing: boolean } const mockUser: UserProfile = { name: "Diecast by Dollar", username: "@DiecastByDollar", bio: "Hey I'm Dollar Gill! 🚗 I collect Hot Wheels, Jada, Matchbox, Maisto, Pink Slips and other diecast cars. Passionate about miniature automotive art! 🏎️✨", location: "Sydney, Australia", joinDate: "August 2025", email: "hi@diecastbydollar.com", phone: "+1 (555) 123-4567", website: "www.DiecastByDollar.com", followers: 2847, following: 892, posts: 156, likes: 12400, avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/21616217_90.jpg-YQw7j36MOYnX34E2mXOCDDXrwsk2Wz.jpeg", coverImage: "/abstract-design-pattern.png", skills: ["Hot Wheels", "Maisto", "Matchbox", "Jada", "Pink Slips"], isFollowing: false, } export default function UserProfileCard() { const [user, setUser] = useState(mockUser) const [isLoading, setIsLoading] = useState(false) const [isEditing, setIsEditing] = useState(false) const [isLiked, setIsLiked] = useState(false) const [editForm, setEditForm] = useState(mockUser) const handleFollow = async () => { setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 1000)) setUser((prev) => ({ ...prev, isFollowing: !prev.isFollowing })) setIsLoading(false) } const handleLike = () => { setIsLiked(!isLiked) } const handleEdit = () => { setIsEditing(true) setEditForm(user) } const handleSave = () => { setUser(editForm) setIsEditing(false) } const handleCancel = () => { setEditForm(user) setIsEditing(false) } const formatNumber = (num: number) => { if (num >= 1000) { return (num / 1000).toFixed(1) + "k" } return num.toString() } return (

{/* Profile Content */}

{/* Avatar and Basic Info */}

{/* Avatar */}

{/* Name, Username, and YouTube Button */}

{isEditing ? (

setEditForm({ ...editForm, name: e.target.value })} className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-lg font-semibold" placeholder="Name" /> setEditForm({ ...editForm, username: e.target.value })} className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm" placeholder="Username" />

) : ( <>

{user.name}

{user.username}

)}

{/* Settings Button */}

{isEditing ? (

) : ( )}

{/* Bio */} {isEditing ? (

setEditForm({ ...editForm, bio: e.target.value })}
            className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm leading-relaxed resize-none"
            placeholder="Bio"
            rows={3}
          />
        ) : (
          <p className="text-white/85 text-sm leading-relaxed">{user.bio}</p>
        )}

{/* Skills */}
        <div className="flex flex-wrap gap-1.5">
          {isEditing ? (
            <div className="w-full">
              <Input
                value={editForm.skills.join(", ")}
                onChange={(e) =>
                  setEditForm({ ...editForm, skills: e.target.value.split(", ").filter((s) => s.trim()) })
                }
                className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm"
                placeholder="Skills (comma separated)"
              />
            </div>
          ) : (
            user.skills.map((skill, index) => (
              <Badge
                key={index}
                className="bg-blue-500/20 hover:bg-blue-500/30 border border-blue-400/30 text-blue-100 text-xs px-2.5 py-1 transition-all duration-300 font-medium"
              >
                {skill}
              </Badge>
            ))
          )}
        </div>

{/* Stats */}
        <div className="grid grid-cols-4 gap-3 py-2">
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.posts)}</p>
            <p className="text-white/60 text-xs font-medium">Posts</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.followers)}</p>
            <p className="text-white/60 text-xs font-medium">Followers</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.following)}</p>
            <p className="text-white/60 text-xs font-medium">Following</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.likes)}</p>
            <p className="text-white/60 text-xs font-medium">Likes</p>
          </div>
        </div>

{/* Contact Info */}
        <div className="space-y-2.5 bg-white/5 rounded-xl p-4 border border-white/10">
          {isEditing ? (
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <MapPin className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.location}
                  onChange={(e) => setEditForm({ ...editForm, location: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Location"
                />
              </div>
              <div className="flex items-center gap-3">
                <Calendar className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.joinDate}
                  onChange={(e) => setEditForm({ ...editForm, joinDate: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Join Date"
                />
              </div>
              <div className="flex items-center gap-3">
                <Mail className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.email}
                  onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Email"
                />
              </div>
              <div className="flex items-center gap-3">
                <Globe className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.website}
                  onChange={(e) => setEditForm({ ...editForm, website: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Website"
                />
              </div>
            </div>
          ) : (
            <>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <MapPin className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.location}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Calendar className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">Joined {user.joinDate}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Mail className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.email}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Globe className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.website}</span>
              </div>
            </>
          )}
        </div>

{/* Action Buttons */}
        <div className="flex gap-2.5 pt-1">
          <Button
            onClick={handleFollow}
            disabled={isLoading}
            className="flex-1 bg-blue-500 hover:bg-blue-600 border-0 text-white font-medium transition-all duration-300 hover:scale-[1.02] shadow-lg hover:shadow-xl"
          >
            {isLoading ? <Users className="h-4 w-4 animate-spin mr-2" /> : <Users className="h-4 w-4 mr-2" />}
            {user.isFollowing ? "Following" : "Follow"}
          </Button>

<Button
            onClick={handleLike}
            className={`bg-white/10 hover:bg-white/20 border border-white/20 hover:border-white/30 text-white transition-all duration-300 hover:scale-[1.02] shadow-md ${isLiked ? "bg-red-500/20 border-red-400/30" : ""}`}
          >
            <Heart className={`h-4 w-4 transition-colors duration-300 ${isLiked ? "fill-red-400 text-red-400" : ""}`} />
          </Button>
        </div>
      </div>
    </div>
  )
}7c:["$","$L86",null,{"chatId":"uF5NUOGpMGF","children":["$","$L87",null,{"data":{"@\"active-block\",\"uF5NUOGpMGF\",":{"id":"b_QJcoFuK0rMm","messageId":"pM6btdT3Kqbgcuo3GATgeLSXKaOk2DEr","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"user-profile-card","type":"code-project","project":"user-profile-card","taskNameActive":"Adding interactive features","taskNameComplete":"Added interactive features"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"uF5NUOGpMGF\",":false,"":null},"children":"$L89"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This